import React, { Component } from 'react'
import { NavBar, Icon } from 'antd-mobile';
import './index.css'
import {Link} from 'react-router-dom'
import { getBookDetail,getBookComment,getChapter,getSource} from '../../api'

class BookDetail extends Component {
    constructor(props) {
        super(props)
        this.state = {
            book: {},
            comment: [] ,
            chapterList: [],
            source: [],   
            link: ''      
        }
    }
    // 返回
    go() {
        this.props.history.go(-1)
    } 
    componentDidMount(){    
        getBookDetail(this.props.match.params.id)
        .then(res=>{
             this.setState( ()=>({
                book: res.data
            }))

            getSource(this.state.book._id)
            .then( res=>{
                this.setState(()=>({
                    source: res.data[0]            
                }))  

                getChapter(this.state.source._id)  
                .then(result=>{
                    this.setState( ()=>({
                        chapterList: result.data.chapters
                    })) 
                    
                    this.setState( ()=>({
                        link: this.state.chapterList[0].link
                    }))                               
                })  
            })  

        })  
        
        getBookComment(this.props.match.params.id)
        .then(res=>{
             this.setState( ()=>({
                comment: res.data.reviews.slice(0,2)                                                                                       
            }))  
        })  

      

    }
    componentWillUnmount() {
        this.setState = (state, callback) => {
          return
        }
      }
  

    render() {  
        var currentTime = new Date().getTime()      
        new Date(this.state.book.updated).getTime()     
   
        
        return (
            <div className='app-bookdetail-box'>
            <header>
                <NavBar
                    mode="light"
                    icon={<Icon type="left" onClick={this.go.bind(this)} />}
                    rightContent={[
                        <Icon key="0" type="home" style={{ marginRight: '16px' }} />
                    ]}
                >书籍详情</NavBar>
            </header>     
            {this.state.book?
                <section className='main'>         
                    <div className='book-option'>
                        <div className='book-intro clear'>
                         <img className='l' src= {this.state.book.cover? unescape(this.state.book.cover.substring(7)) : '' }></img>
                             <div className='list-box l'>
                                <h4>{this.state.book.title}</h4>
                                <p>
                                    <span>{this.state.book.author}</span>
                                    <u>|</u>
                                    <b>{this.state.book.cat}</b>
                                    <u>|</u>
                                    <b>{Math.floor(this.state.book.wordCount/10000)}万字</b>
                                </p>                                
                                <p>
                                    { 
                                        this.state.book.updated?
                                       Math.round((currentTime-new Date(this.state.book.updated).getTime())/1000/60/60):''
                                    }
                                  小时前更新
                                </p>
                            </div>
                        </div>
                        <div className='button-box'>
                            <a>加入书架</a>
                            {  this.state.link?
                                  <Link to={ {pathname:'/paper',state:{text: this.state.link}} }>开始阅读</Link>   
                            :'' }  
                                                  
                        </div>
                    </div>
                    <ul className='reader-data'>
                        <li>
                            <span>追人气</span>
                            <h4>{this.state.book.latelyFollower/10000}万</h4>
                        </li>
                        <li>
                            <span>读者留存率</span>
                            <h4>{this.state.book.retentionRatio }万</h4>
                        </li>
                        <li>
                            <span>日更新字数/天</span>
                            <p>0</p>
                        </li> 
                    </ul>
                    <div className='introduction'>
                         <p className='moreline'>
                            {this.state.book.longIntro}
                         </p>
                    </div> 
                    <div className='dir clear'>
                        <h5 className='l'>目录</h5>                        
                        <p className='r'>
                            <b className='l'>[ { 
                                        this.state.book.updated?
                                       Math.round((currentTime-new Date(this.state.book.updated).getTime())/1000/60/60):''
                                    }
                             小时前更新]
                             </b>
                            <span className="over l">{this.state.book.lastChapter}</span>              
                            <Link to={{pathname:'/chapter',state:{id: this.state.book._id} } }><i className='l iconfont iconyoubianjiantou'></i></Link>
                        </p>                        
                    </div>
                    {/* 热门书评 */}
               
                    <div className='comment'>
                        <h4 className='clear'>
                            <b className='l'>热门书评</b>
                            <span className='r'>更多评论</span>                            
                        </h4>
                        <ul>
                             {this.state.comment?
                    this.state.comment.map( (item,index)=>{
                        return (
                            <li className='clear' key={index}>
                                <img className='l' src={item.author.avatar?`/zs/${item.author.avatar}`: ''}/>
                                <div className='comment-intro l'>
                                    <h5>{ item.author.nickname }</h5>  
                                    <p className='com over'>{item.title}</p>                                   
                                    <p className="content moreline">
                                        { item.content }
                                    </p>
                                    <p className="love clear">
                                        <span className='l'>
                                           { 
                                                item.updated?
                                                Math.round((currentTime-new Date(item.updated).getTime())/1000/60/60/60):''
                                            }
                                        分钟前</span>
                                        <span className='r'>{item.helpful.yes}人觉得有用</span>
                                    </p>
                                </div>
                            </li>
                                   )
                    }) 
                     :''
                    }
                        </ul>
                    </div>   
                           
                     <div className='copyright'>
                        <h5>版权信息</h5>
                        <p>{this.state.book.copyright}</p>
                     </div>
                </section>
                 : '' } 
            </div>
        )
    }
}
export default BookDetail